<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>vue的动画效果钩子与velocity.js动画</title>
  <script src="./js/vue2.js"></script>
  <script src="./js/velocity.js"></script>
</head>
<body>
  <div id="app">
    <!-- 动画钩子 -->
    <transition name="fade"
    @before-enter="handleBeforeEnter"
    @enter="handleEnter"
    @after-enter="handleAfterEnter"
    >
      <div v-show="show">Hello world</div>
    </transition>

    <button @click="handleClick">toggle</button>
  </div>
</body>
</html>
<script>
  var app = new Vue({
    el:'#app',
    data:{
      show:true,
    },
    methods: {
      handleClick: function(){
        this.show = !this.show;
      },
      // 动画开始之前钩子
      handleBeforeEnter:function(el){
        console.log('before-enter');
        el.style.opacity = 0;
      },
      // 动画开始钩子
      handleEnter:function(el,done){
        console.log('enter');
        Velocity(el, 
          {opacity:1},
          // 完成之后需要调用回调done
          {duration:1000,complete:done}
        );
      },
      // 动画结束之后钩子
      handleAfterEnter:function(el){
        console.log('after-enter');
      }
    }
  });
</script>